import React, { Suspense, useEffect, useState } from 'react';
import { useRoutes } from 'react-router-dom';
import routes from './router';
import AppHeaderTab from './components/app-header-tab';
import { AppWrapper } from './style';
import PlayerBar from './views/player/player-bar';
import { useAppDispatch } from './store';
import { changeSongdetailAction } from './views/player/store';
import { Progress } from 'antd';


function App() {
  const dispatch = useAppDispatch()
  const [percentData, setPercentData] = useState(0)
  const trimTime = setTimeout(() => {
    setPercentData(percentData + 1)
  }, 300)

  useEffect(() => {
    clearTimeout(trimTime)
    dispatch(changeSongdetailAction(29567193))
    setPercentData(100)
  }, [])

  return (
    <AppWrapper className="App">
      <AppHeaderTab />
      <div className="content">
        <Suspense fallback={<Progress percent={percentData} status="active" size="small" />}>{useRoutes(routes)}</Suspense>
      </div>
      <PlayerBar />
    </AppWrapper>
  );
}

export default App;
